<script setup name="BusinessFlow">
import { Delete, Edit, View } from '@element-plus/icons-vue'
import SearchBar from '@/components/SearchBar/SearchBar.vue'
import businessFlowService from '@/api/businessFlow/index.js'

const router = useRouter()
const tableData = ref([])
const tableColumn = reactive([
  { type: 'seq', width: 60, title: '序号', align: 'center' },
  {
    title: '流程名称',
    field: 'flowName',
    align: 'center',
  },
  {
    title: '操作',
    field: 'action',
    align: 'center',
    slots: {
      default: 'actions',
    },
    width: 300,
  },
])
const searchConfig = reactive([
  {
    type: 'input',
    label: '流程名称',
    field: 'flowName',
  },
])
const pagerConfig = ref({
  total: 0,
  currentPage: 1,
  pageSize: 10,
})
const ids = ref([])
const queryParam = ref({})

onMounted(() => {
  getList()
})

function getList() {
  const formData = {
    ...queryParam.value,
    pageSize: pagerConfig.value.pageSize,
    pageNum: pagerConfig.value.currentPage,
  }
  businessFlowService.list(formData).then((res) => {
    tableData.value = res.rows
    pagerConfig.value.total = res.total
  })
}

function handleGoAdd() {
  router.push('/business/businessFlowAdd')
}

function handleFormAction(row, type) {
  router.push({
    path: `/business/businessFlowAdd`,
    query: {
      flowId: row.flowId,
      type,
    },
  })
}

function handleDelete(row) {
  const delId = row ? row.flowId : ids.value.join(',')
  businessFlowService.delete(delId).then(() => {
    ids.value = []
    getList()
  })
}
function handleSearch(e) {
  queryParam.value = e
  getList()
}
function handlePageChange({ currentPage, pageSize }) {
  pagerConfig.value.currentPage = currentPage
  pagerConfig.value.pageSize = pageSize
  getList()
}
</script>

<template>
  <div class="app-container">
    <el-card shadow="never">
      <SearchBar :search-config="searchConfig" @search="handleSearch" />
    </el-card>
    <el-card shadow="never" class="mt-3">
      <div class="toolbar flex mb-1">
        <div class="mb-2 space-x-3">
          <el-button
            v-hasPermi="['system:businessFlow:add']"
            type="primary"
            class="el-gradient-primary"
            @click="handleGoAdd"
          >
            新增
            <el-icon class="el-icon--right">
              <CirclePlusFilled />
            </el-icon>
          </el-button>
          <el-button
            v-hasPermi="['system:businessFlow:remove']" type="danger" class="el-gradient-danger"
            :disabled="ids.length === 0"
            @click="handleDelete(null)"
          >
            删除
            <el-icon class="el-icon--right">
              <Delete />
            </el-icon>
          </el-button>
        </div>
        <RightToolbar />
      </div>
      <vxe-grid
        :data="tableData"
        :columns="tableColumn"
        :pager-config="pagerConfig"
        header-cell-class-name="headerCellClass"
        @page-change="handlePageChange"
        max-height="650px"
      >
        <template #actions="{ row }">
          <el-button
            v-hasPermi="['system:businessFlow:query']" text type="primary" size="small"
            @click="handleFormAction(row, 'view')"
          >
            查看
          </el-button>
          <el-button
            v-hasPermi="['system:businessFlow:edit']" text type="success" size="small"
            @click="handleFormAction(row, 'edit')"
          >
            修改
          </el-button>
          <span v-hasPermi="['system:businessFlow:remove']">
            <el-popconfirm :title="`确认删除流程名称为 ${row.flowName} 吗？`" width="200px" @confirm="handleDelete(row)">
              <template #reference>
                <el-button text size="small" type="danger" >
                  删除
                </el-button>
              </template>
            </el-popconfirm>
          </span>
        </template>
      </vxe-grid>
    </el-card>
  </div>
</template>

<style lang="scss" scoped>

</style>
